<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性）
		     1.控制字体：font-family、font-size、font-weight
			 2.控制文本布局：text-aglin、line-height、letter-spacing、word-spacing
			 3.文本修饰效果：text-decoration、text-shadow
			 4.处理文本效果：white-space
		-->
		<style>
			/* css3语法：选择器{
				        属性：属性值；
						属性：属性值；
						......
			            }
						叫法：一个样式
			 */
			bo dy div#d1{
				color: #beeeee;
				/* 知识点1：文本格式化属性控制字体 
				font-family:字体家族，指定字体形式
				*/
				font-family: 华文彩云,sans-serif;
				/* 设置多个字体:浏览器会按照顺序寻找可用字体
				 用户体验，用户系统有什么字体，优先指定字体
				 通常与统配选择器使用    *{}
				 */
				/* 知识点2：文本格式化属性控制字体
				 font-size:字体大小属性，与单位共存
				 单位  px 像素  使用特点：绝对值、pc端
				 |em  相对单位，理解：倍数
				              使用特点：相对与父元素按照倍数方式、移动端
				 */
				/* 知识点3：文本格式化属性控制字体
				 font-weight字体粗细属性，不存在单位
				           属性值：数值【100 200 300  ...  900】
						          常用数值:400
						          单词【400==normal、bold、light 】
				使用方法：统配选择器搭配使用：指定全局字体正常字体明细
				 */
				font-weight: 600;
				font-size: 2em;
				/* 补充：1.英文大写；2.首字母大写；3.段落开始间距200px */
			}
			
			div#d1{/* 通过加权方式，锁定元素 权值 ：101 */
				color: #c6daee;
				/* 知识点4：文本格式化属性控制文本格式 【对齐、间隙】
				text-alingn:文本对齐属性,用于弹性布局
				text-align: left|right|center|justify:两端对齐
	            */
			   text-align:justify;
			   /* 知识点5：文本格式化属性控制文本格式
				行高属性line-height:文本垂直效果
				使用方式：1.高度属性：属性值一致
				         2.在高度属性上加行高属性：属性值一致
				*/
			   border: 1px solid red;
			   height: 100px;
			   line-height: 100px;
			   /* 补充：文本的对齐和行高属于对齐|间隙：字符和单词之间距离*/
			   /* 知识点6:letter-spacing:设置字符之间间隙
			      知识点7:word-spacing：设置单词之间间隙
			   */
			  let ter-spacing: 10px;
			  word-spacing: 10px;
			}
			
			#d1{/* 权值：100 */
				color: #eed2c0;
			}
			a.c1{/*权值:11*/
			/* 知识点6：text-decoration 修饰超链接样式
			 使用方法：与通配符一起使用，设置全局页面超链接样式
			 属性值：none|underline|line-through
			 */
			text-decoration: line-through;
			/* 知识点9：text*-shadow 修饰文本阴影
			   属性值：X轴 Y轴  blur模糊距离 color 
			 */
			text-shadow: 5px 5px 5px #ff0;
			}
			p{
				border: 1px solid red;
				/* 知识点10：文本换行效果
				 white-space: 文本换行属性
				属性值：nowrap 不换行|pre 保存空格和回车|normal默认 空格合并，换行隐藏
				 */
				white-space: normal;
				
			}
		</style>
	</head>
	<body>
		<!-- 需求：创建div，添加假文【tab】
		           id选择器，通过加权找到div，添加颜色
				   -->
				   <div id="d1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente quod nam quaerat, dignissimos et laborum quam modi. Voluptatibus suscipit fuga deserunt veniam laboriosam ullam in officia, quam itaque tempore ipsa?</div>
	            <hr>
				<h4>文本修饰效果</h4>
				<!-- 文本修饰相关属性
				  知识点7：text-decoration属性：设置超链接效果
				 -->
				<a href="http://www.tsgzy.edu.cn">实现跳转【方式：6种】</a>
				<div style="height: 800px;"></div>
				<marquee>
					<h4>处理文本效果</h4>
				</marquee>
				
	</body>
</html>